<template>
  <div class="content">
    
    <el-dialog
      :title="title"
      :visible.sync="show"
      width="680px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      modal-append-to-body
      >
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" >
        <el-form-item label="地址信息：" prop="values">
          <el-cascader
          style="width: 540px;"
            v-model="values"
            :options="addressoptions" clearable :props="props"
            @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址：" prop="street">
          <el-input v-model="form.street" type="textarea"  :rows="3" maxlength="300" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元 等信息"></el-input>
        </el-form-item>
        <el-form-item label="收货人姓名" prop="customerConsigneeName">
          <el-input v-model="form.customerConsigneeName" maxlength="50" placeholder="长度不超过25个字符"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：" prop="customerConsigneePhone">
          <el-input v-model="form.customerConsigneePhone" maxlength="11" placeholder="请输入手机号码">
            <div  slot="prepend" class="el-input__icon">
              中国大陆 +86 
              <i class="el-icon-arrow-down"></i>
            </div>
          </el-input>
        </el-form-item>
        
        
        <el-form-item label="是否默认地址" prop="">
          <el-checkbox v-model="checked"></el-checkbox>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {addressedit,} from '@/api/user'
import areaData from '@/utils/city-data/area'
import cityData from '@/utils/city-data/city'
import provinceData from '@/utils/city-data/province'

export default {
  name: "address1",//收货地址
  props:{
    title:String,
    open:Boolean,
    acitem:Object,
    list:Array,
  },
  data() {
    const isMobile = (str) => {
      const reg = /^(1[3456789]\d{9})$/
      return reg.test(str)
    }
    const validateFilter = (rule, value, callback) => {
     if (isMobile(value)) {
        callback()
      } else {
        callback(new Error('手机号格式不正确'))
      }
    }
    return {
    
      form:{
        customerConsigneeName:'',
        customerConsigneePhone:'',
        street:'',
      },
      rules:{
        values:[
          {required: true, message: '请选择地址信息', trigger: 'change'},
        ],
        customerConsigneeName:[
          {required: true, message: '请输入收货人名称', trigger: 'blur'},
        ],
        street:[
          {required: true, message: '请输入收货详细地址', trigger: 'blur'},
        ],
        customerConsigneePhone:[
          {required: true, message: '请输入收货人电话', trigger: 'blur'},
          {
            // 自定义验证函数
            validator: validateFilter,
            // 触发器可以同时用blur和change
            trigger: ['blur'],
          }
        ],
      },
      props:{
      
        children: 'children',
        lazy: true,
        lazyLoad:this.lazyLoad,
      },
      addressoptions:provinceData,
      values:[],
      checked:false,
      show:false,
    };
  },
  watch:{
    acitem:{
      handler(val){
        this.show=val
        if(val){
          this.form=JSON.parse(JSON.stringify(val))
          if(val.customerConsigneeDefault==1){
            this.checked=true
          }else{
            this.checked=false
          }
          var arr=[val.provinceCode,val.cityCode,val.areaCode]
          this.values=arr
          this.$set(this.form,'values',arr)
          
          
        }
        
      },
      deep: true,
      immediate: true
    },
    open:{
      handler(val){
        this.show=val
       
        
      },
      immediate: true
    }
  },
  mounted() {
      // this.init()
      
  },
  methods: {
    lazyLoad(node, resolve) {
      const { level,value } = node;
      // console.log(node)
      if(level == 1){
          var index=provinceData.findIndex(item => item.value == value)
          const nodes = cityData[index]||null
          // console.log(nodes)
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        }else if(level == 2){
          // console.log(value)
          provinceData.map((item,index)=>{
            cityData[index].map((item1,index1)=>{
                if(item1.value == value){
                  const nodes = areaData[index][index1]||null
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(nodes);
                }
              })
            
          })
        
          
        }else{
          resolve(null);
        }
    },
    
   
    cancel(){
      this.show=false
      this.$emit('cancel')
    },
    handleChange(e){
        console.log(e)
        if(e&&e.length>0){
           this.form.adressName=''
          provinceData.map((item,index)=>{
            if(item.value == e[0]){
              this.form.adressName+=item.label
              cityData[index].map((item1,index1)=>{
                if(item1.value == e[1]){
                  this.form.adressName+=item1.label
                  areaData[index][index1].map((item2,index2)=>{
                    if(item2.value == e[2]){
                      this.form.adressName+=item2.label
                    }
                  })
                }
              })
            }
          })
        //  console.log(this.form.adressName)
          this.form.provinceCode=e[0]
          this.form.cityCode=e[1]
          this.form.areaCode=e[2]
        }else{
          this.form.adressName=''
          this.form.provinceCode=''
          this.form.areaCode=''
          this.form.cityCode=''
        }
    },
    submitForm(){
      console.log(this.$refs.ruleForm)
      this.$refs['ruleForm'].validate(async (valid) => {
        console.log(valid)
        console.log("****")
        if (valid) {
            console.log(this.form)
            if(this.checked){
              this.form.customerConsigneeDefault=1
            }else{
              this.form.customerConsigneeDefault=0
            }
            this.form.customerId=this.$store.state.user.customerId
           
            const res =await addressedit(this.form)
            console.log(res)
            if(res.code !=200){
              return this.$message.error(res.msg)
            }
            this.show=false
            this.$emit('submitForm', 1)
         
        } 
      });
    },
    addAddress(item){
      console.log(item)
      this.acitem=item
      this.open=true
    },
    async init(){
      console.log(provinceData)
      console.log(cityData)
      console.log(areaData)

    },
    
  },
  
  
};
</script>
<style scoped lang="scss">
::v-deep .el-input-group__prepend {
    background-color: #fff;
  }
.el-input__icon{
  width: 130px;
}
.content{
  padding: 16px;
  box-sizing: border-box;
  .title{
    font-weight: bold;
    font-size: 24px;
    color: #333333;
    line-height: 36px;
    text-align: left;
    margin-bottom: 16px;
  }
  .shouhuobox{
    display: flex;
    flex-wrap: wrap;
    gap: 16px 16px;
    .shouhuoitem{
      width: 286px;
      height: 170px;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #E0E0E0;
      cursor: pointer;
      position: relative;
      .itembox{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
       
        .tubiao{
          font-size: 40px;
          color: #828282;
        }
        span{
          font-weight: 400;
          font-size: 14px;
          color: #828282;
          line-height: 20px;
          text-align: center;
          margin-top: 8px;
        }
      }
      .itembox1{
        padding: 16px;
        box-sizing: border-box;
       
        .name{
          font-weight: 400;
          font-size: 20px;
          color: #000000;
        }
        .dianhau{
          font-weight: 400;
          font-size: 14px;
          color: #828282;
          margin: 16px 0;
        }
        .dizhi{
          font-weight: 400;
          font-size: 14px;
          color: #828282;
          line-height: 20px;
          text-align: left;
        }
        .btns{
        position: absolute;
        bottom: 16px;
        right: 16px;
          display: none;
          align-items: center;
          justify-content: flex-end;
          .btnitem{
            font-weight: 400;
            font-size: 14px;
            color: #0672F9;
            line-height: 20px;
            text-align: left;
            cursor: pointer;
            margin-left: 16px;
          }
        }
      }
    }
    .shouhuoitem:hover,.shouhuoitem:active{
      border: 1px solid #0672F9;
      .btns{
        display: flex;
      }
    }
  }
}
</style>
